<template>
  <nav>
    <img alt="Vue logo" class="logo" src="@/assets/logo.png" width="70" height="70" @click="$emit('logo-clicked')" />
    <router-link class="router-link" to="/"> 主页 </router-link>
    <router-link class="router-link" to="/chat"> 聊天 </router-link>
    <router-link class="router-link" to="/about"> 关于 </router-link>
    <!-- 其他导航链接 -->

    <el-button v-if="!ifLogined" style="margin-left:auto;background-color:#02bd7e;border-color: #02bd7e;color: black; "
      @click="$router.replace('/Login')" round>登录</el-button>
    <el-button v-if="!ifLogined" style="color: #02bd7e;" @click="$router.replace('/Register')" type="">注册</el-button>
    <el-dropdown v-if="ifLogined" style="margin-left:auto;margin-right: 30px;"  @visible-change="updateCredit">
      <a style="font-size: 1rem;">
        <el-icon><User /></el-icon>
        {{ username }}
      </a>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item  @click="goToProfile">个人中心</el-dropdown-item>
          <el-dropdown-item>当前余额:<a>{{ balance.toFixed(2) }}</a></el-dropdown-item>
          <el-dropdown-item  @click="logout">登出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!--     <el-button v-if="ifLogined" style="color: #02bd7e" @click="logout" type="" round>登出</el-button> -->
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

const sessionid = ref(GetCookie('sessionid'));
const ifLogined = ref(sessionid.value.length > 0);
const username = ref("");
const balance = ref(0);

function GetCookie(name: string) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return '';
}

onMounted(async () => {
  try {
    await axios.get('/api/v2/auth/csrf');
    updateCredit()
    getusername()

    // The request was successful
    // If you need to do something with the response, you can do it here
  } catch (error) {
    // The request failed
    // You can handle the error here
    console.error(error);
  }
});

const goToProfile = async () => {
  window.location.href = "/profile";
}

const updateCredit = async () => {
  // Make the POST request to api/v2/getuser
  let csrftoken = GetCookie('csrftoken');

  try {
    const response = await axios.post("/api/v2/informations/getcredit", {
    }, {
      headers: {
        'X-CSRFToken': csrftoken,
      }
    });

    if (response.data["state"] == "ok") {
      balance.value = response.data["credit"];
    } else {
      console.log("error: " + response.data["msg"]);
    }
  } catch (error) {
    console.log("error: " + error);
  }
}

const getusername = async () => {
  if (ifLogined.value) {
    // Make the POST request to api/v2/getuser
    let csrftoken = GetCookie('csrftoken');

    try {
      const response = await axios.post("/api/v2/informations/getuser", {
      }, {
        headers: {
          'X-CSRFToken': csrftoken,
        }
      });

      if (response.data["state"] == "ok") {
        username.value = response.data["username"];
        ifLogined.value = true;
      } else {
        ifLogined.value = false;
        console.log("error: " + response.data["msg"]);
      }
    } catch (error) {
      ifLogined.value = false;
    }
  }
}

const logout = async () => {
  let csrftoken = GetCookie('csrftoken');

  console.log("logout");
  const response = await axios.post("api/v2/logout", {
  }, {
    headers: {
      'X-CSRFToken': csrftoken,
    }
  });
  if (response.data["state"] == "ok") {
    window.location.href = "/";
  }

};
</script>

<!-- Your styles here -->
<style scoped>
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  height: 70px;
  font-size: 1.2rem;
  /* 其他样式属性 */

  /* 添加一些边框和阴影 */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 调整链接的样式 */
.router-link {
  text-decoration: none;
  padding: 10px;
  /* 调整链接内部的内边距 */
  border-radius: 5px;
  /* 圆角 */
  transition: background-color 0.3s ease;
  /* 添加过渡效果 */
}

.router-link-right {
  text-decoration: none;
  padding: 10px;
  /* 调整链接内部的内边距 */
  border-radius: 100px;
  /* 圆角 */
}

.router-link-right:hover {
  text-decoration: none;
  padding: 10px;
  /* 调整链接内部的内边距 */
  border-radius: 100px;
  /* 圆角 */
  pointer-events: none;

}

.logo {
  text-decoration: none;
  padding: 10px;
  /* 调整链接内部的内边距 */
  border-radius: 100px;
  /* 圆角 */
}

.el-button {
  transition: transform 0.3s ease;
}

.el-button:hover {
  transform: scale(1.1);
}

@keyframes click {
  0% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.el-button:active {
  animation: click 0.5s;
}</style>
